<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>
<script>
  // 解构赋值
  // 1.数组的解构
  // ES5:
  // var arr = ["张安","李四","王五"];
  // var a = arr[0];
  // var b = arr[1];
  // var c = arr[2];
  // console.log(a,b,c);

  // ES6
  // var arr = ["张安","李四","王五"];
  // // a、b、c和数组是一一对应关系 ，且是自定义的；
  // let [a,b,c] = arr;
  // console.log(a,b,c);

  // 数组解构参数；
  // ES5
  // function fn(myarr){
  //     let a = myarr[0];
  //     let b = myarr[1];
  //     let c = myarr[2];
  //     console.log(a,b,c);
  // }
  // ES6
  // function fn([a,b,c]){
  //     console.log(a,b,c);
  // }
  // var arr = ["张安","李四","王五"];
  // fn(arr);

  //   2.对象解构
  //   var obj = {
  //     name: "张三",
  //     age: 20,
  //     height: "180cm",
  //   };
  //   //   ES5
  //   var name = obj.name;
  //   var age = obj.age;
  //   var height = obj.height;
  //   console.log(name, age, height);

  // ES6
  //   最常用的解构
  //   如果对象的键值和键名相同了，那么可以省略一个
  //   let myname = "张三";
  //   let age = 20;
  //   let height = "180cm";
  //   let obj = {
  //     myname: "张三",
  //     age: 20,
  //     height: "178cm",
  //   };
  //   console.log(obj);

  // 对象的深层次解构 ；
  // 要保持和原本对象的结构一致就可以了；
  var obj = {
    name: "张三",
    obj2: {
      height: "179cm",
    },
  };

  // let {name:name,obj2:{height:height}} = obj;
  // console.log(name,height);

  function fn({ name, obj2: { height } }) {
    console.log(name, height);
  }
  fn(obj);

  // 总结 ： 数组 及 对象的解构  ； 1.深层次解构 2. 函数参数里的解构 ；
</script>
